
import {
    getYzm,
    userRegister
} from "api"

import React, { memo, useState } from 'react'
import { Link } from "react-router-dom"
import { message } from 'antd';
import {vil} from "./verification"

export default memo(function Register() {

    const [email, setEmail] = useState("")
    const [password, setPassword] = useState("")
    const [password1, setPassword1] = useState("")
    const [xuehao, setXuehao] = useState("")
    const [code_val, setCode_val] = useState("")

    const [text,setText]=useState("获取验证码")
    let timeNumber=60

    // 获取验证码
    const getyam = async () => {
        let data = await getYzm({ email })
        message.success(data.msg);
        if(data.code===200 && timeNumber===60){
            let timer=setInterval(()=>{
                setText(`倒计时${timeNumber}`)
                timeNumber-=1
                if(timeNumber===0){
                    clearInterval(timer)
                    timeNumber=60
                    setText("获取验证码")
                }
            },1000)
            
        }
    }

    // 提交注册信息
    const submit=async (e)=>{
        e.preventDefault()
        // console.log(email,password,password1,xuehao,code_val)
        // 先进行表单验证
        let isTrue=vil(email,password,password1,xuehao,code_val)
        // console.log(isTrue)
        if(isTrue===true){
           let data=await userRegister({email,password,password1,xuehao,code_val})
        //    console.log(data)
           message.success(data.msg);

        }

    }


    return (
        <div className="register">
            <form action="">
                <h2>
                    REGISTER
                </h2>
                <div className="item">
                    <p>
                        email
                    </p>
                    <input name="email" value={email} onChange={e => { setEmail(e.target.value.trim()) }} id="email" type="email" />
                </div>
                <div className="item">
                    <p>
                        xuehao
                    </p>
                    <input onChange={e => setXuehao(e.target.value.trim())} value={xuehao} id="xuehao" type="text" />
                </div>
                <div className="item">
                    <p>
                        password
                    </p>
                    <input placeholder="密码长度 4 -20 个字符" onChange={e => setPassword(e.target.value.trim())} value={password} id="password" type="password" />
                </div>
                <div className="item">
                    <p>
                        password1
                    </p>
                    <input onChange={e => setPassword1(e.target.value.trim())} value={password1} id="password1" type="password" />
                </div>
                <div className="item">
                    <p>
                        yzm
                    </p>
                    <input onChange={e => setCode_val(e.target.value.trim())} value={code_val} id="yzm" type="text" />
                    <div onClick={getyam} className="getyzm">
                        {text}
                    </div>
                </div>

                <div className="footer_item">
                    <button onClick={submit}>
                        submit
                    </button>
                </div>
                <div className="footer_item">
                    <Link to="/login">
                        login
                    </Link>
                    <Link to="/findpassword">
                        findpassword
                    </Link>
                </div>

            </form>

        </div>
    )
})

